@keyframes shake {
    from {
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        transform: scale3d(1, 1, 1)
    }
}

.outer{
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../../../public/img/login-background-1.jpg');
    // background-position: center; 
    // background-repeat: no-repeat;
    background-attachment: fixed;
    // padding-top: 20%; // 图片真实高度/宽度 * 100
    padding:0 0 0 0 ;
    background-repeat:no-repeat;
    background-size:auto;
    background-position:center;
    transition: all 1.0s;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease;
            transition-delay: 0s;
    
    .center{
        position: relative;
        margin: auto;
        width: 50%;
        padding-top: 10%;
        min-width: 250px;
        text-align: center;
        .avatar{
            margin: auto;
            position: relative;
            background-image: url('../../../public/img/cuteCharactor.jpg');
            background-attachment:scroll;
            background-repeat:no-repeat;
            background-position:center;
            background-size: cover;
            width: 128px;
            height: 128px;
            border-radius: 200px;
            border: 3px solid #00a0ff;
            opacity: 1;
        }
        .name{
            margin: auto;
            padding-top: 50px;
            min-width: 200px;
            position: relative;
            text-align: center;
            a{
                background: -webkit-linear-gradient(#e8edee,#079ef5);
                background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 48px;
                font-weight: 100;
                font-family: '华文楷体';
                text-align: center;
                line-height: 1.2;
                text-shadow: 3px 1px 5px rgb(38, 159, 240);
            }
            a:hover{
                text-shadow: 0px 0px 0px rgb(38, 159, 240);
            }
        }
        .quotations{
            margin: auto;
            padding-top: 50px;
            padding-left: 20px;
            padding-right: 20px;
            position: relative;
            height: 100px;
            // background-color: blue;
            color: white;
            text-align: center;
            font-size: 24px;
            font-weight: 100;
            font-family: '华文楷体';
        }
        .btns{
            margin: auto;
            margin-top: 5%;
            position: relative;
            width: 520px;
            min-width: 500px;
            height: auto;
            // background-color: red;
        }
        .btn{
            position: relative;
            margin: auto;
            margin-left: 10px;
            float: left;
            height: 50px;
            width: 90px;
            border: 2px solid white;
            border-radius: 200px;
            text-align: center;
            padding-top: 3px;
            color: white;
            background-color: rgba(203, 226, 241, 0.2);
            box-shadow: 4px 0 34px -1px rgb(40, 146, 218),
                0 4px 34px -1px rgb(2, 58, 95),
            ;
            animation: shake 1s;
            a{
                color:white;
                font-family: '华文楷体';
                font-size: 24px;
            }
        }
        .btn:hover{
            box-shadow: 0 0 0 0 white;
            background-color: rgba(203, 226, 241, 0);
            // animation: tada 1s;
        }
        // .btn:active{
        //     animation: none;
        // }
        .btnsMobile{
            margin: auto;
            width: 60%;
            min-height: 100px;
            position: relative;
            padding-top: 50px;
            a{
                color:white;
                font-family: '华文楷体';
                font-size: 16px;
                margin-left: 10px;
                text-decoration:underline;
                text-shadow: 3px 1px 5px rgb(38, 159, 240);
            }
        }
    }
   
    .copyright{
        position: relative;
        height: 20px;
        text-align: center;
        color: white;
    }
  }
